<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('发起流程')"/>
    <style>

        .mainBox {
            width: 90%;
            margin-top: 20px;
            position: absolute;
            top: 0px;
            left: 0px;
            bottom: 50px;
            overflow: auto;
        }

        .bottom {
            width: 100%;
            position: absolute;
            bottom: 0px;
            left: 0px;
            height: 50px;
            line-height: 50px;
            background-color: #F8F8F8;
            border-top: 1px solid #eee;
        }

        .button-container {
            position: absolute;
            right: 15px;
        }
        body{
            background-color: #fff;
        }
    </style>
</head>
<body>

<div class="layui-tab" lay-filter="tab-handle" style="height: 100%">
    <ul class="layui-tab-title">
    </ul>
    <div class="layui-tab-content">
    </div>
</div>
</body>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    let url = [[${url}]];
    let src2 = [[${src2}]];
    let src3 = [[${src3}]];
    layui.use(function () {
        let element = layui.element;
        element.tabAdd('tab-handle', {
            title: '待办',
            content: '<iframe src="'+pName + url+'" frameborder="0" width="100%" height="100%"></iframe>',
            id: "1",
            change: true // 是否添加完毕后即自动切换
        })

        element.tabAdd('tab-handle', {
            title: '跟踪',
            content: '<iframe id="iframe2" src="" frameborder="0" width="100%" height="100%"></iframe>',
            id: "2"
        })
        element.tabAdd('tab-handle', {
            title: '历史',
            content: '<iframe id="iframe3" src="" frameborder="0" width="100%" height="100%"></iframe>',
            id: "3"
        })
        //执行渲染
        element.init();
        // tab 切换事件
        element.on('tab(tab-handle)', function(data){
            if(data.index==1) {
                if($('#iframe2').attr("src") == "") {
                    $('#iframe2').attr("src",pName + src2);

                }
            }else if(data.index == 2) {
                if($('#iframe3').attr("src") == "") {
                    $('#iframe3').attr("src",pName + src3);

                }
            }

        });

        $('.layui-tab-content').height(window.innerHeight-60);
        $(window).on("resize", function () {

            $('.layui-tab-content').height(window.innerHeight-60);
        });
    });
</script>
</html>